<template>
  <w-modal
    ref="WModal"
    title="二维码生成"
    :ok-type="imgData? 'danger' : 'primary'"
    :ok-text="imgData ? '清 除' : '确 定'"
    @ok="createQRCode"
  >
    <a-input v-model="inputData" type="textarea" placeholder="请输入..." />
    <div v-if="imgData" style="text-align: center">
      <img :src="imgData" style="max-width: 500px" alt />
    </div>
  </w-modal>
</template>

<script lang="ts">
import QRCode from "qrcode";
import { Vue, Component } from "vue-property-decorator";
import WModal, { ModalComType } from "@/components/global/modal";

@Component({
  name: "ComWebToolQRCode",
  components: {
    WModal,
  },
})
export default class ComWebToolQRCode extends Vue {
  inputData = "";
  imgData = "";

  show() {
    (this.$refs.WModal as ModalComType).show();
  }

  createQRCode() {
    if (this.imgData) {
      this.inputData = "";
      this.imgData = "";
      return;
    }
    if (!this.inputData) {
      this.$message.error("请输入数据");
      return;
    }
    (this.$refs.WModal as ModalComType).showLoading()
    QRCode.toDataURL(this.inputData)
      .then((url: string) => {
        this.imgData = url;
      })
      .catch(() => {})
      .finally(() => {
         (this.$refs.WModal as ModalComType).hideLoading()
      })
  }
}
</script>

<style scoped></style>
